<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
	<head>
		<title>后台管理</title>
		<meta charset="utf-8">
		<link rel="icon" href="img/logo.png" sizes="32x32">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">OJ后台管理系统</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" class="layui-nav-img">
							${currentUser.getUserName() }
						</a>
						<dl class="layui-nav-child">
							<!-- 弹出窗口 -->
							<dd class="leftdaohang" data-url="admin/updatePwd"  mytitle="修改密码"><a href="javascript:;">修改密码</a></dd>
						</dl>
					</li>
					<li class="layui-nav-item"><a href="user/logout">退出</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed" name="tabs">
							<a class="" href="javascript:;">题库管理</a>
							<dl class="layui-nav-child">
								<dd class="leftdaohang" data-url="admin/addProblem"  mytitle="添加题目"><a href="javascript:;">添加题目</a></dd>
								<dd class="leftdaohang" data-url="admin/problemList"  mytitle="题目列表"><a href="javascript:;">题目列表</a></dd>
								<dd class="leftdaohang" data-url="admin/problemType"  mytitle="题目类别管理"><a href="javascript:;">题目类别管理</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item" name="tabs">
							<a class="" href="javascript:;">用户管理</a>
							<dl class="layui-nav-child">
								<dd class="leftdaohang" data-url="admin/userList"  mytitle="用户列表"><a href="javascript:;">用户列表</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item" name="tabs"><a href="javascript:;" class="leftdaohang" data-url="admin/noticeList"  mytitle="公告管理">公告管理</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body" style="overflow: hidden;">
				<div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true" style="margin: 0;">
					<ul class="layui-tab-title">
						<li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i><span>我的桌面</span></li>
					</ul>
					<div class="layui-tab-content" style="padding-right: 0px;">
						<div class="layui-tab-item layui-show">
							<iframe style='width: 100%;margin-top:0px;border:none;' height='550' src='admin/myDesktop'></iframe>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				© OnlineJudge.com
			</div>
		</div>
		<script>
			layui.use('element', function() {
				var $ = layui.jquery,
					element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
				$(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none');
				//触发事件
				var active = {
					tabAdd: function() {
						//新增一个Tab项
						var htmlurl = $(this).attr('data-url');
						var mytitle = $(this).attr('mytitle');
						//先判断是否已经有了tab
						var arrayObj = new Array(); //创建一个数组  
						$(".layui-tab-title").find('li').each(function() {
							var y = $(this).attr("lay-id");
							arrayObj.push(y);
						});
						var have = $.inArray(mytitle, arrayObj); //返回 3,
						if (have >= 0) {
							//tab已有标签
							element.tabChange('demo', mytitle); //切换到当前点击的页面
						} else {
							var h = $(window).height() - 150;
							//没有相同tab
							//                      alert("遍历的没有相同tab："+mytitle);
							element.tabAdd('demo', {
								title: mytitle //用于演
									,
								content: '<iframe style="width: 100%;height:' + h +
									'px;margin-top:0px;border:none;" scrolling="auto" src=' + htmlurl + ' ></iframe>',
								id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
							})
							element.tabChange('demo', mytitle); //切换到当前点击的页面
						}
					}

				};
				//这里是实现点击竖式选项卡，执行添加
				$(".leftdaohang").click(function() {
					var type = "tabAdd";
					var othis = $(this);
					active[type] ? active[type].call(this, othis) : '';
				});
			});
		</script>
	</body>
</html>

